<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="lib/bootstrap-switch.min.css">
<link rel="stylesheet" href="lib/bootstrap-datetimepicker.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="lib/bootstrap-switch.min.js"></script>
<script src="lib/moment.js"></script>
<script src="lib/bootstrap-datetimepicker.min.js"></script>
<script src="lib/reconnecting-websocket.js"></script>

<title>中央日志</title>
</head>
<body>
 	<div class="container">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<nav class="navbar navbar-default  navbar-fixed-top" role="navigation">
				<div class="navbar-header">
					<a class="navbar-brand" href="#"><strong>中央日志</strong></a>
				</div>
				
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<div class="navbar-form navbar-left">
						<input type="checkbox" class="autoscrollBtn" checked data-on-text="滚屏" data-off-text="锁屏">
					</div>
					<div class="navbar-form navbar-left" role="search">
						<div class="form-group">
							<input type="text" class="form-control filterStrEdit" placeholder="关键字" />
						</div>
						<button type="submit" class="btn btn-default clearScreenEdit" data-loading-text="Loading..." >清屏</button>
					</div>
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							 <a href="#" class="dropdown-toggle" data-toggle="dropdown">帮助<strong class="caret"></strong></a>
							<ul class="dropdown-menu">
								<li>
									<a href="#">使用手册</a>
								</li>
								<li class="divider">
								</li>
								<li>
									<a href="#">关于</a>
								</li>
							</ul>
						</li>
					</ul>
					<div class="navbar-form navbar-right" >
					</div>
				</div>
				
			</nav>
			<div class="table-responsive " style="margin-top: 50px">
			<table class="table table-hover table-condensed">
			</table>
			</div>
		</div>
	</div>
</div>
<div class="temp" style="visibility: hidden;">
<table>
<tr class="logtr">
	<td>
	</td>
</tr>
</table>
</div>


</body>

<script>
$(function(){
	var autoscroll=true;
	var filter={
		"str" : "",
		"has" : false
	};
	
	function filtAppendTr(wordSrc){
		var $tr = $(".temp .logtr").clone();
		var $td = $tr.find("td");
		$td.html(wordSrc);
		var word = $td.text();
		if(filter.has){
			var index = word.indexOf(filter.str);
			if(index == -1){
				$tr.hide();
			}else{
				$td.html(word.replace(filter.str,"<font color='#FF0000'>"+filter.str+"</font>"));
			}
		}
		$(".table").append($tr);
	}
	
	function filtTr($tr){
		var $td = $tr.find("td");
		var word = $td.text();
		if(filter.has){
			var index = word.indexOf(filter.str);
			if(index == -1){
				$tr.hide();
			}else{
				$tr.show();
				$td.html(word.replace(filter.str,"<font color='#FF0000'>"+filter.str+"</font>"));
			}
		}else{
			$tr.show();
			$td.text(word);
		}
	}
	
	function Websocket(){
		var wsurl = "ws://"+window.location.hostname+":"+window.location.port+"/websocket/test";
		var ws = new ReconnectingWebSocket(wsurl);
		ws.onopen = function() {
		};
		ws.onmessage = function(message) {
			if(message==null)return;
			var wordSrc = message.data;
			filtAppendTr(wordSrc);
			if(autoscroll){
				$('body').scrollTop( $('body').height());
			}
		};
		function send(message) {
			ws.send(message);
		}
		return {
			"send" : send
		}
	}
	var ws = Websocket();
	$(".autoscrollBtn").bootstrapSwitch();
	$(".autoscrollBtn").on('switchChange.bootstrapSwitch',function(event, state){
		autoscroll = state;
	});

	$(".clearScreenEdit").click(function () {
	    $(this).button('loading');
	    $(".table").empty();
	    $(this).button('reset');
	});
	
	$(".filterStrEdit").on("keyup",function(){
		var filterStr = $(this).val();
		if(filterStr!=""){
			filter.has = true;
			filter.str = filterStr;
		}else{
			filter.has = false;
			filter.str = "";
		}
		$(".table tr").each(function(){
			filtTr($(this));
		});
	});
	  
});
</script>

</html>